<template>
	<view class="integral">
		<view class="navbar">
			<u-navbar title="积分" :background="navbarBackground" :back-icon-color="textColor" :title-color="textColor" :border-bottom="false"></u-navbar>
		</view>
		
		<view class="bgBox">
			<view class="card">
				<view class="label">总积分，不含待入账积分</view>
				<view class="numberBox flex_end_b">
					<view class="number">{{user_score}}</view>
				</view>
				<view class="info flex_space_b">
					<view>昨日收益：￥{{yes_score}}</view>
					<view>累计收益：￥{{total_score}}</view>
				</view>
			</view>
		</view>
		
		<view class="amountList">
			<view class="tabBox">
				<view style="width: 400rpx;">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" inactive-color="#363636" active-color="#22ac38"></u-tabs>
				</view>
			</view>
			
			<view class="bill mTop2">
				<view class="item" v-for="(item,index) in score_list" :key="index">
					<view class="top">
						<view class="">{{item.remark}}</view>
						<view v-if="item.action == '20'">-{{item.score}}</view>
						<view class="redText" v-else>+{{item.score}}</view>
					</view>
					<view class="bottom">
						<view class="">{{item.create_time}}</view>
						<view class="status">已完成</view>
					</view>
				</view>
				
				<view class="noContent" v-if="score_list.length == 0">
				  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				p:1,
				is_loading:false,
				is_more:true,
				score_list:[],
				user_score:0,
				total_score:0,
				yes_score:0,
				list: [{
					name: '全部'
				}, {
					name: '收入'
				}, {
					name: '支出'
				}],
				current: 0,
				scrollTop: 0
			}
		},
		onLoad(options) {
			this.loadData();
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.moreData();
			}
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				this.is_loading = true;
				let action = '';
				if(this.current == 1){
					action = '10';
				}else if(this.current == 2){
					action = '20';
				}
				let data = {
					'p':this.p,
					'action': action
				};
				util.requestPost("api.php/user/userScore", data, function(res) {
					let is_more = false;
					if(res.data.score_list.length >=15){
					  is_more = true;
					}
					that.score_list = res.data.score_list;
					that.user_score = res.data.user_score;
					that.yes_score = res.data.yes_score;
					that.total_score = res.data.total_score;
					that.is_loading = false;
					that.is_more = is_more;
				});
			},
			moreData: function(){
				// 加载数据
				var that = this;
				let action = '';
				if(this.current == 1){
					action = '10';
				}else if(this.current == 2){
					action = '20';
				}
				let data = {
					'p':this.p,
					'action': action
				};
				this.is_loading = true;
				util.requestPost("api.php/user/moreScoreList", data, function(res) {
					let is_more = false;
					if(res.data.score_list.length >=15){
					  is_more = true;
					}
					if(that.p == 1){
						that.score_list = res.data.score_list;
					}else{
						that.score_list = that.score_list.concat(res.data.score_list);
					}
					that.is_loading = false;
					that.is_more = is_more;
				});
			},
			change (index) {
				this.current = index;
				this.p = 1;
				this.loadData();
			}
		},
		computed:{
			navbarBackground: function () {
				if (this.scrollTop >= 50) {
					return { background: '#fff' }
				} else {
					return { background: 'rgba(255, 255, 255, ' + (0.02 * this.scrollTop) + ')' }
				}
			},
			textColor:function () {
				return this.scrollTop >= 50 ? '#606060' : '#fff'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped>
.integral {
	background-color: var(--bgColor);
	min-height: 100%;
	height: auto;
	overflow: hidden;
}
.navbar {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 750rpx;
}
.bgBox {
	background-color: #148d04;
	height: 330rpx;
	position: relative;
}
.bgBox .card {
	position: absolute;
	top: 160rpx;
	left: 50%;
	width: 670rpx;
	transform: translateX(-50%);
	padding: 36rpx 52rpx;
	background: linear-gradient(90deg, #22ac38, #48b520);
	border-radius: 24rpx;
	color: #FFFFFF;
	box-shadow: 0 0 8px rgba(255, 99, 98 , 0.1);
}
.bgBox .card .label {
	font-size: 24rpx;
}
.bgBox .card .info {
	font-size: 24rpx;
}
.bgBox .card .numberBox {
	padding: 40rpx 0;
}
.bgBox .card .numberBox .number {
	font-size: 72rpx;
}

.amountList {
	margin-top: 172rpx;
	padding: 0 40rpx;
}
.amountList .tabBox {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 0 16rpx rgba(0, 0, 0 , 0.1);
}
.amountList .item {
	padding: 32rpx;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 0 16rpx rgba(0, 0, 0 , 0.1);
}
.amountList .item:last-of-type {
	border-bottom: none;
}
.amountList .item .top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	color: #333333;
	font-size: 28rpx;
}
.amountList .item .bottom {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999999;
}
.amountList .item .bottom .status {
	color: #333333;
}
</style>
